<template>
    <div>
        <header>
            <div class="headerLeft">
                <h3>服务数据</h3>
            </div>
            <div class="headerCenter">
                <h1>某某市某某区办税渠道运行状态大数据监控平台</h1>
            </div>
            <div class="headerRight">
                <h3>业务数据</h3>
            </div>

        </header>
        <section>
            <div class="firstCon">
                <div class="firstCon-left">
                    <h4>各业务平均办理时间/分钟</h4>
                    <div class="firstLeftsec">
                        <div class="contain">
                            <div class="firsttab" ref="firsttab1"></div>
                            <p>综合业务</p>
                        </div>
                        <div class="contain">
                            <div class="firsttab" ref="firsttab2"></div>
                            <p>综合业务</p>
                        </div>
                        <div class="contain">
                            <div class="firsttab" ref="firsttab3"></div>
                            <p>综合业务</p>
                        </div>
                        <div class="contain">
                            <div class="firsttab" ref="firsttab4"></div>
                            <p>综合业务</p>
                        </div>
                    </div>
                </div>
                <div class="first-center">
                    <h3>当前大厅等候人数</h3>
                    <div class="firstcenLeft">
                        <div class="flag">
                            <strong>35</strong>
                            <p>综合业务</p>
                        </div>
                        <div class="flag">
                            <strong>35</strong>
                            <p>综合业务</p>
                        </div>
                        <div class="flag">
                            <strong>35</strong>
                            <p>综合业务</p>
                        </div>
                    </div>
                    <div class="firstcenCen">
                        <span>1</span>
                        <span>4</span>
                        <span>9</span>
                    </div>
                    <div class="firstcenRight">
                        <div class="flag">
                            <strong>35</strong>
                            <p>综合业务</p>
                        </div>
                        <div class="flag">
                            <strong>35</strong>
                            <p>综合业务</p>
                        </div>
                        <div class="flag">
                            <strong>35</strong>
                            <p>综合业务</p>
                        </div>
                    </div>
                </div>
                <div class="firstCon-right">
                    <h4>各业务平均办理时间/分钟</h4>
                    <div class="firstLeftsec">
                        <div class="contain">
                            <div class="firsttab" ref="firsttab5"></div>
                            <p>综合业务</p>
                        </div>
                        <div class="contain">
                            <div class="firsttab" ref="firsttab6"></div>
                            <p>综合业务</p>
                        </div>
                        <div class="contain">
                            <div class="firsttab" ref="firsttab7"></div>
                            <p>综合业务</p>
                        </div>
                        <div class="contain">
                            <div class="firsttab" ref="firsttab8"></div>
                            <p>综合业务</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="secondCon">
                <div class="secondLeft">
                    <div class="secondLeftCon">
                        <div class="secondLeftTab">
                            <div class="fig">
                                <p>各办税渠道使用情况</p>
                            </div>
                            <div class="fig">
                                <p>各办税渠道使用情况</p>
                                <em>80人</em>
                            </div>
                            <div class="fig">
                                <p>各办税渠道使用情况</p>
                                <em>120人</em>
                            </div>
                            <div class="fig">
                                <p>各办税渠道使用情况</p>
                                <em>70人</em>
                            </div>
                        </div>

                        <div class="secondLeftTab">
                            <div class="fig">
                                <p>接待情况</p>
                            </div>
                            <div class="reception">
                                <div class="recetit">
                                    <strong>40人</strong>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <p>本月新办户数</p>
                                </div>
                                <div class="recetit">
                                    <strong>40人</strong>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <p>本月新办户数</p>
                                </div>
                                <div class="recetit">
                                    <strong>40人</strong>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <span class="changecolor"></span>
                                    <p>本月新办户数</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="secondCen">
                    <div class="secondCenCon">
                        <h3>业务办理实时监控</h3>
                        <div class="secondContit">
                            <div class="secondContitleft">
                                <p>今日累计业务办理量</p>
                                <img src="../../../assets/image/echarts_01/line.png" alt="">
                                <ul class="china">
                                    <li><a href="">发票代开</a></li>
                                    <li><a href="">发票发售</a></li>
                                    <li><a href="">纳税申报</a></li>
                                    <li><a href="">发票验旧</a></li>
                                    <li><a href="">发票认证</a></li>
                                </ul>
                                <img src="../../../assets/image/echarts_01/line.png" alt="">
                                <ul class="number">
                                    <li><a href="">20</a></li>
                                    <li><a href="">40</a></li>
                                    <li><a href="">32</a></li>
                                    <li><a href="">34</a></li>
                                    <li><a href="">30</a></li>
                                </ul>
                                <img src="../../../assets/image/echarts_01/line.png" alt="">
                            </div>
                            <div class="secondContitright" id="secondContitright">
                                <div class="charbar" ref="charbar"></div>
                            </div>
                        </div>
                        <div class="secondContit">
                            <div class="secondContitleft">
                                <p>今日累计业务办理量</p>
                                <img src="../../../assets/image/echarts_01/line.png" alt="">
                                <ul class="china">
                                    <li><a href="">发票代开</a></li>
                                    <li><a href="">发票发售</a></li>
                                    <li><a href="">纳税申报</a></li>
                                    <li><a href="">发票验旧</a></li>
                                    <li><a href="">发票认证</a></li>
                                </ul>
                                <img src="../../../assets/image/echarts_01/line.png" alt="">
                                <ul class="number">
                                    <li><a href="">20</a></li>
                                    <li><a href="">40</a></li>
                                    <li><a href="">32</a></li>
                                    <li><a href="">34</a></li>
                                    <li><a href="">30</a></li>
                                </ul>
                                <img src="../../../assets/image/echarts_01/line.png" alt="">
                            </div>
                            <div class="secondContitright" id="secondContitright2">
                                <div class="charbar" ref="charbar2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="secondRight">
                    <div class="secondRightCon">
                        <div class="secondLeftTab">
                            <div class="fig">
                                <p>区域收入情况</p>
                            </div>
                            <div class="secondRighttit">
                                <div class="secondRighttext">
                                    <div class="text">
                                        <p>省级以上</p>
                                        <span>442户</span>
                                    </div>
                                    <div class="text">
                                        <p>省级以上</p>
                                        <span>442户</span>
                                    </div>
                                    <h4>重点税源户数</h4>
                                </div>
                                <div class="secondRighttext">
                                    <div class="secondRighttextChar" ref="secondRighttextChar">

                                    </div>
                                    <h4 class="sec">重点税源户数</h4>
                                </div>
                                <div class="secondRighttext">
                                    <div class="secondRighttextChar" ref="secondRighttextChar1">

                                    </div>
                                    <h4 class="sec">税收占比</h4>
                                </div>
                            </div>
                        </div>
                        <div class="secondLeftTab">
                            <div class="fig">
                                <p>数据统计分析</p>
                            </div>
                            <div class="secondChar" ref="secondChar">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="thirdCon">
                <div class="thirdLeft">
                    <div class="thirdLeftCon">
                        <div class="secondLeftTab">
                            <div class="fig">
                                <p>当日纳税人咨询最热问题 TOP5</p>
                            </div>
                            <ul class="hottop">
                                <li><span>1</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>2</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>3</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>4</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>5</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="thirdCen">
                    <div class="thirdCenCon">
                        <div class="txt txtleft">
                            <div class="content">
                                <h4>当日各时段大厅人流量曲线图</h4>
                                <div class="contentChar" ref="contentChar1"></div>
                            </div>
                        </div>
                        <div class="txt txtright">
                            <div class="content">
                                <h4>当日各时段大厅人流量曲线图</h4>
                                <div class="contentChar" ref="contentChar2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="thirdRight">
                    <div class="thirdRightCon">
                        <div class="secondLeftTab">
                            <div class="fig">
                                <p>当日纳税人咨询最热问题 TOP5</p>
                            </div>
                            <ul class="hottop">
                                <li><span>1</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>2</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>3</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>4</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                                <li><span>5</span>
                                    <p>如何代开发票？</p><a href="">了解详情</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="footerleft">
                <img src="../../../assets/image/echarts_01/right.png" alt="" class="rightimg">
                <div class="home">
                    <img src="../../../assets/image/echarts_01/home.png" alt="">
                    <button id="homebtn" value="首页">首页</button>
                </div>
                <div class="con">
                    <p>当前时间</p>
                    <h4>2018年1月9日 星期四 15:00</h4>
                </div>
            </div>
            <div class="footercen"></div>
            <div class="footerright"></div>
        </footer>
    </div>

</template>

<script>
// 引入基本模板
import echarts from 'echarts/lib/echarts'
// // 引入需要使用的图表类型、提示框和标题
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'

export default {
    data() {
        return {
            firsttab1: null,
            firsttab2: null,
            firsttab3: null,
            firsttab4: null,
            firsttab5: null,
            firsttab6: null,
            firsttab7: null,
            firsttab8: null,
            charbar: null,
            charbar2: null,
            secondRighttextChar: null,
            secondRighttextChar1: null,
            secondChar: null,
            contentChar1: null,
            contentChar2: null,
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 初始化图表
            this.firsttab1 = echarts.init(this.$refs.firsttab1);
            this.firsttab2 = echarts.init(this.$refs.firsttab2);
            this.firsttab3 = echarts.init(this.$refs.firsttab3);
            this.firsttab4 = echarts.init(this.$refs.firsttab4);
            this.firsttab5 = echarts.init(this.$refs.firsttab5);
            this.firsttab6 = echarts.init(this.$refs.firsttab6);
            this.firsttab7 = echarts.init(this.$refs.firsttab7);
            this.firsttab8 = echarts.init(this.$refs.firsttab8);
            this.charbar = echarts.init(this.$refs.charbar);
            this.charbar2 = echarts.init(this.$refs.charbar2);
            this.secondRighttextChar = echarts.init(this.$refs.secondRighttextChar);
            this.secondRighttextChar1 = echarts.init(this.$refs.secondRighttextChar1, null, { width: '100px' });
            this.secondChar = echarts.init(this.$refs.secondChar);
            this.contentChar1 = echarts.init(this.$refs.contentChar1);
            this.contentChar2 = echarts.init(this.$refs.contentChar2);
            window.addEventListener("resize", () => {
                this.firsttab1.resize();
                this.firsttab12.resize();
                this.firsttab3.resize();
                this.firsttab4.resize();
                this.firsttab5.resize();
                this.firsttab6.resize();
                this.firsttab7.resize();
                this.firsttab8.resize();
                this.charbar.resize();
                this.charbar2.resize();
                this.secondRighttextChar.resize();
                this.secondRighttextChar1.resize();
                this.secondChar.resize();
                this.contentChar1.resize();
                this.contentChar2.resize();
            });

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },

                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '80%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold', color: ['#fff'],
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {
                                value: 2.5, name: '2.5', itemStyle: {
                                    color: "#0268e8"
                                }
                            }
                        ]
                    }
                ]
            };
            if (option && typeof option === "object") {
                this.firsttab1.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab2.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab3.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab4.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab5.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab6.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab7.setOption(option, true);
            }
            if (option && typeof option === "object") {
                this.firsttab8.setOption(option, true);
            }




            const option1 = {
                title: {
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: ['发代开', '发票发', '纳税申', '发票旧', '发认证']
                },
                series: [
                    {
                        name: '业务办理',
                        type: 'pie',
                        radius: '35%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 335, name: '发票代开' },
                            { value: 310, name: '发票发售' },
                            { value: 234, name: '纳税申报' },
                            { value: 135, name: '发票验旧' },
                            { value: 1548, name: '发票认证' }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal: {
                                color: function (params) {
                                    //自定义颜色
                                    var colorList = [
                                        '#01b7ff', '#fd7c28', '#6fb440', '#ffc800', '#2d89dc',
                                    ];
                                    textStyle: {
                                        // fontWeight : 300 ,
                                        fontSize: 8    //文字的字体大小
                                    }
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            };
            if (option1 && typeof option1 === "object") {
                this.charbar.setOption(option1, true);
            }
            if (option1 && typeof option1 === "object") {
                this.charbar2.setOption(option1, true);
            }




            const option2 = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '30%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['省级', '市级'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff',//左边线的颜色
                                width: '2'//坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',//坐标值得具体的颜色

                            }
                        }

                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff',//左边线的颜色
                                width: '2'//坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',//坐标值得具体的颜色

                            }
                        }

                    }
                ],
                series: [
                    {
                        // name: '直接访问',
                        type: 'bar',
                        barWidth: '40%',
                        data: [32.62, 52.68],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = ['#05fef8', '#fedc00'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }

                    }
                ]
            };
            if (option2 && typeof option2 === "object") {
                this.secondRighttextChar.setOption(option2, true);
            }


            const option3 = {
                tooltip: {
                    trigger: 'item',
                    // formatter: "{a} <br/>{b}: {c} ({d}%)",
                    formatter: "{d}%"
                },
                series: [
                    {
                        // name: '省级市级',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                                // formatter: '{b}: {c} ({d}%)' // 自定义格式化提示文本
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '8',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = ['#05fef8', '#fedc00'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false,

                            }
                        },
                        data: [
                            { value: 335, name: '省级以上' },
                            { value: 310, name: '市级以上' }
                        ]
                    }
                ]
            };
            // const option3 = {
            //     series: [
            //         {
            //             name: '访问来源',
            //             type: 'pie',
            //             radius: ['40%', '70%'], // 设置环形图的内外半径，实现环形效果
            //             data: [
            //                 { value: 335, name: '直接访问' },
            //                 { value: 310, name: '邮件营销' },
            //                 { value: 234, name: '联盟广告' },
            //                 { value: 135, name: '视频广告' },
            //                 { value: 1548, name: '搜索引擎' }
            //             ],
            //             emphasis: {
            //                 itemStyle: {
            //                     shadowBlur: 10,
            //                     shadowOffsetX: 0,
            //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //                 }
            //             }
            //         }
            //     ]
            // };
            if (option3 && typeof option3 === "object") {
                this.secondRighttextChar1.setOption(option3, true);
            }



            // Generate data
            var category = [];
            var dottedBase = +new Date();
            var lineData = [];
            var barData = [];

            for (var i = 0; i < 20; i++) {
                var date = new Date(dottedBase += 3600 * 24 * 1000);
                category.push([
                    date.getFullYear(),
                    date.getMonth() + 1,
                    date.getDate()
                ].join('-'));
                var b = Math.random() * 200;
                var d = Math.random() * 200;
                barData.push(b)
                lineData.push(d + b);
            }


            // option
            const option4 = {
                backgroundColor: '#0f375f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['line', 'bar'],
                    textStyle: {
                        color: '#ccc'
                    }
                },
                xAxis: {
                    data: category,
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                series: [{
                    name: 'line',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 5,
                    data: lineData
                }, {
                    name: 'bar',
                    type: 'bar',
                    barWidth: 5,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 5,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#fbb307' },
                                    { offset: 1, color: '#84f00e' }
                                ]
                            )
                        }
                    },
                    data: barData
                }, {
                    name: 'line',
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: 'rgba(20,200,212,0.5)' },
                                    { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                                    { offset: 1, color: 'rgba(20,200,212,0)' }
                                ]
                            )
                        }
                    },
                    z: -12,
                    data: lineData
                }, {
                    name: 'dotted',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    itemStyle: {
                        normal: {
                            color: '#0f375f'
                        }
                    },
                    symbolRepeat: true,
                    symbolSize: [12, 4],
                    symbolMargin: 1,
                    z: -10,
                    data: lineData
                }]
            };
            if (option4 && typeof option4 === "object") {
                this.secondChar.setOption(option4, true);
            }



            const option5 = {
                xAxis: {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisTick: {
                        show: false
                    },
                    data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width: '2'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        // show:false
                    },
                    axisLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#fff',//左边线的颜色
                            width: '2'//坐标线的宽度
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',//坐标值得具体的颜色

                        }
                    }
                },
                series: [{
                    data: [5, 8, 20, 22, 24, 22, 35, 18, 10, 1],
                    type: 'line',
                    smooth: .2,
                    color: '#04fefa'
                }]
            };
            if (option5 && typeof option5 === "object") {
                this.contentChar1.setOption(option5, true);
            }
            if (option5 && typeof option5 === "object") {
                this.contentChar2.setOption(option5, true);
            }

        }

    }
};
</script>

<style>
@import "../../../assets/css/echarts_01/index.css";
</style>